import { trendColumn } from '@/services/api/api-analysis';
import { Column } from '@ant-design/plots';
import { Skeleton, Spin } from 'antd';
import { useEffect, useState } from 'react';

interface TrendCuesColumnCardProps {
    type: string,
    organizationTopId: string
}

const TrendCuesColumnCard: React.FC<TrendCuesColumnCardProps> = (props) => {

    const { type, organizationTopId } = props;
    
    const [loading, setLoading] = useState(true);
    const [skeletonLoadding, setSkeletonState] =
        useState<boolean>(true);

    const [dataTrendLine, setDataTrendLineState] =
        useState<AnalysisData.TrendLine[]>();

    const [dataTrendColumn, setDataTrendColumnState] =
        useState<AnalysisData.TrendColumn[]>();
    

    useEffect(() => {
        setLoading(true)
        loadTrendColumnData();
        console.log(organizationTopId);
    }, [type, organizationTopId]);

    const config = {
        // data: dataTrendColumn,
        // xField: 'date',
        // yField: 'count',

        // label: {
        //     // 可手动配置 label 数据标签位置
        //     position: 'middle',
        //     // 'top', 'bottom', 'middle',
        //     // 配置样式
        //     style: {
        //         fill: '#FFFFFF',
        //         opacity: 0.6,
        //     },
        // },
        // xAxis: {
        //     label: {
        //         autoHide: true,
        //         autoRotate: false,
        //     },
        // },    
        // meta: {
        //     type: {
        //         alias: '类别',
        //     },
        //     sales: {
        //         alias: '销售额',
        //     },
        // },

        // data: dataTrendColumn,
        // isGroup: true,
        // autoFit: true,
        // seriesField: 'type',
        // legend: { itemHeight: 20 },
        // xField: 'date',
        // yField: 'count',
        // // isStack: true,
        // slider: {
        //     start: "0.6",
        //     edd: "0"
        // },
        // limitInPlot: false,
        // padding: [40, 10, 80, 0],
        // meta: {
        //     time: {
        //         sync: false, // 开启之后 slider 无法重绘
        //     },
        // },
        // shape: 'triangle', // 设置柱状图形状为圆柱体
        // label: {
        //     // 可手动配置 label 数据标签位置
        //     styles: {
        //         fill: '#FFFFFF',
        //     },
        //     position: 'middle',
        //     layout: [
        //         // 柱形图数据标签位置自动调整
        //         {
        //             type: 'interval-adjust-position',
        //         }, // 数据标签防遮挡
        //         {
        //             type: 'interval-hide-overlap',
        //         }, // 数据标签文颜色自动调整
        //         // {
        //         //   type: 'adjust-color',
        //         // },
        //     ],
        // },
        // xAxis: {
        //     label: {
        //         autoHide: true,
        //         autoRotate: false,
        //     },
        // }
        data: dataTrendColumn,
        isStack: true,
        xField: 'date',
        yField: 'count',
        legend: {
            layout: 'horizontal',
            position: 'topx',
        },
        seriesField: 'type',
        label: {
            // 可手动配置 label 数据标签位置
            position: 'top',
            // 'top', 'bottom', 'middle'
            // 可配置附加的布局方法
            layout: [
                // 柱形图数据标签位置自动调整
                {
                    type: 'interval-adjust-position',
                }, // 数据标签防遮挡
                {
                    type: 'interval-hide-overlap',
                }, // 数据标签文颜色自动调整
                {
                    type: 'adjust-color',
                },
            ],
        },
    };

    //chengchanghong
    /**
     * 线索征集
     * @param key
     */
    const loadTrendColumnData = async () => {
        console.log(organizationTopId);

        try {
            const response = await trendColumn({ type, organizationTopId });
            if (response.code === 0) {
                setDataTrendColumnState(response.data);
            }
            setLoading(false)
            setSkeletonState(false)
        } catch (error) { }
    };




    return (<>
        <Skeleton avatar title={false} loading={skeletonLoadding} active>
            <Spin spinning={loading}>
                {dataTrendColumn && <Column {...config} />}
            </Spin>
        </Skeleton>
    </>);
};

export default TrendCuesColumnCard;
